<template>
	<view class="fill-record">
		<view class="search">
			<view class="search-input" style="flex: 1.2;">
				<u--input @change="confirmSearch" placeholder="请输入项目名、填报人" border="none" v-model="keywords" shape="circle" :adjustPosition="false"></u--input>
			</view>
			<view class="search-input" @click="showCalendar = true">
				<u--input placeholder="选择日期范围" border="none" v-model="dateValue" shape="circle" :disabled="true"></u--input>
				<u-icon name="calendar" size="24"></u-icon>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="stateColumns" keyName="name" @confirm="pickerSure" @cancel="showPicker = false"></u-picker>
		<u-calendar :show="showCalendar" mode="range" @confirm="confirm" @close="close" :minDate="minDate"  monthNum="48" :defaultDate="defaultDateMultiple"></u-calendar>
		<scroll-view @scrolltolower="scrolltolower" scroll-y class="container"
			:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
					<fill-record-item v-for="(item, index) in fillRecordArray" :key="index"  :data="item"
						@fnGetList="refreshDataList"></fill-record-item>
						<u-empty  v-if="!fillRecordArray.length"  mode="data" text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</scroll-view>
	</view>

</template>

<script>
	import fillRecordItem from "./fill-record-item.vue";
	import fileMixin from "@/mixins/file.js";
	import { mjsSoil_list,mjsCement_list,mjsDiesel_list } from "@/api/mjs.js"
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { handleFormatDate } from "@/utils/date.js";
	import mixins from "@/utils/mixins.js"
		const d = new Date()
		const year = d.getFullYear()
		let month = d.getMonth() + 1
		month = month < 10 ? `0${month}` : month
		const date = d.getDate()
	export default {
		name: "fill-repair-record",
		mixins: [fileMixin, mixins],
		components: {
			fillRecordItem
		},
		props: {
			formType: {
				type:String,
				default:'1'
			}
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 填报记录列表
				fillRecordArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 是否正在加载中
				isLoading: false,
				isFinished: false,
				showCalendar:false,
				dateValue:'',
				minDate:'',
				// defaultDate:[moment().format('YYYY-MM-DD'),moment().add(3, 'days').format('YYYY-MM-DD')],
				showPicker:false,
				stateColumns:[[
					{name:'未完成', value:false},
					{name:'已完成', value:true},
				]],
				defaultDateMultiple:[],
				keywords:undefined
			}
		},
		async mounted() {
			let today = new Date() //当天
			today.setMonth(today.getMonth()-24)//三个月前，时间戳
			this.minDate = today.getTime()
			this.initContainerData();
			this.fillRecordArray = await this.getFillRecordArray();
			uni.$on('updateList', data => {
				console.log(data, '触发更新后')
				if(data.needRefersh) {
					this.refreshDataList()
				}
			})
		},
		methods: {
			async confirm(e) {
				console.log(e);
				this.defaultDateMultiple = e
				this.dateValue = e[0].split('-')[1] + '-' + e[0].split('-')[2] + '~' + e[e.length - 1].split('-')[1] + '-' + e[e.length - 1].split('-')[2]
				this.showCalendar = false
				this.fillRecordArray = await this.getFillRecordArray();
			},
			async close() {
				this.showCalendar = false
				this.dateValue = ''
				this.defaultDateMultiple = []
				this.fillRecordArray = await this.getFillRecordArray();
			},
			pickerSure(e) {
				console.log(e);
				

			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight} = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 150;
			},
			async refreshDataList() {
				this.paging.pageNum = 1;
				this.fillRecordArray = await this.getFillRecordArray();
			},
			/** 获取填报记录列表 */
			getFillRecordArray() {
				return new Promise(resolve => {
					const { pageNum, pageSize } = this.paging;
					let apiResq = this.formType == 1 ? mjsSoil_list : (this.formType == 2 ? mjsCement_list : (this.formType == 3 ? mjsDiesel_list : ''))
					apiResq({
						currPage: pageNum,
						pageSize,
						params: {
							projectId: uni.getStorageSync("isOwner"),
							keywords:this.keywords,
							startDate:this.defaultDateMultiple.length ? this.defaultDateMultiple[0] + ' 00:00:00' : undefined,
							endDate:this.defaultDateMultiple.length ? this.defaultDateMultiple[1] + ' 23:59:59' : undefined,
						},
					}).then(async res => {
						const { list, total } = res.result;
						this.paging.total = total;
						list.forEach(it => {
							it.formType = this.formType
						})
						resolve(list);
					});
				});
			},
			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.fillRecordArray = this.fillRecordArray.concat(await this.getFillRecordArray());
					this.isLoading = false;
				}
			},

			/** 确认搜索 */
			async confirmSearch(val) {
				if(!val) {
					this.keywords = null
				}
				this.paging.pageNum = 1;
				this.fillRecordArray = await this.getFillRecordArray();
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-record {
		padding-top: 22upx;

		.search {
			padding: 22upx 16upx 28upx;
			background: #fff;
			height: 88upx;
			position: sticky;
			top: -1px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
			border-top: 1px solid #fff;

			.search-input {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 12upx;
				flex: 1;
				justify-content: space-between;
				width: 240rpx;
				border: 1px solid #f5f7fa;
				border-radius: 50rpx;
				padding: 0 40rpx;
				background: #f5f7fa;
			}

			.option {
				height: 44px;
				line-height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f5f7fa;
				border-radius: 25px;
				width: 100px;
				box-sizing: border-box;
				padding: 0 14px;
				flex-shrink: 0;
				white-space: nowrap;

				view {
					color: #2f80ed;
				}

			}
		}
	}
</style>